<script setup>
  import { useTodoStore, TODO_TYPE } from '@/stores/todo'
  const todoStore = useTodoStore()
</script>
<template>
  <footer class="footer">
    <span class="todo-count">
      <strong>{{ todoStore.unFinishedCount }}</strong>
      item left
    </span>
    <ul class="filters">
      <li>
        <a
          href="#/"
          :class="{selected: todoStore.type === TODO_TYPE.all}"
          @click="todoStore.setType(TODO_TYPE.all)"
        >All</a>
      </li>
      <li>
        <a
          href="#/active"
          :class="{ selected: todoStore.type === TODO_TYPE.finished }"
          @click="todoStore.setType(TODO_TYPE.finished)"
        >Active</a>
      </li>
      <li>
        <a
          href="#/completed"
          :class="{ selected: todoStore.type === TODO_TYPE.unfinished }"
          @click="todoStore.setType(TODO_TYPE.unfinished)"
        >Completed</a>
      </li>
    </ul>
    <button
      class="clear-completed"
      @click="todoStore.clear()"
    >
      Clear completed
    </button>
  </footer>
</template>